<template>
	<div class="homeCurrent">
		<NewsHeader 
		:isInput="dataArr.isInput" 
		:iconArr="dataArr.iconArr" 
		:placeholder="dataArr.placeholder" 
		:aimUrl = 'dataArr.aimUrl'
		:rightUrl='dataArr.rightUrl'
		/>
		<div class="headerSelect">
			<div class="selectList">
				<ul>
					<li v-on:click="showDiv">
						位置
						<span v-if="isSpanW" class="one"></span>
						<span v-if="!isSpanW" class="two"></span>
					</li>
					<li>
						租金
						<span class="one" v-if="isSpanZ"></span>
						<span class="two" v-if="!isSpanZ"></span>
					</li>
					<li>
						筛选
						<span class="one" v-if="isSpanS"></span>
						<span class="two" v-if="!isSpanS"></span>
				</li>
					<li>
						排序
						<span class="one" v-if="isSpanP"></span>
						<span class="two" v-if="!isSpanP"></span>
					</li>
				</ul>
			</div>
		</div>
		<div class="currentCont" v-if="isShow1">
			<div class="currentContDetail" v-for="(item,index) in findRootmate" :key='index'>
				<div class="curren_left">
					<router-link :to="{name:'HouseDetail',params:{
						community:item.community,
						introduce:item.introduce,
						type:item.type,
						area:item.area,
						price:item.price 
					}}">
						<img :src="item.imgUrl" alt="">
					</router-link>
				</div>
				<div class="current_right">
					<p>
						<span>{{ item.community }}</span>
					</p>
					<p><span>{{ item.introduce }}-{{ item.area }}m<sup>2</sup></span></p>
					<p>
						<span>{{ item.type }}</span>
					</p>
					<p>
						<span>{{ item.price }}/月</span>
					</p>
				</div>
			</div>	
		</div>
		<div class="weiZhi" v-if="isShow2">
			<ul>
				<li>附近</li>
				<li class="showDivActive">商圈</li>
				<li>地铁</li>
				<li>
					<router-link to='/nearcompany'>公司赴近</router-link>
				</li>
			</ul>
			<ul>
				<li>不限</li>
				<li>东城</li>
				<li>西城</li>
				<li>海淀</li>
				<li>朝阳</li>
				<li>丰台</li>
				<li>石景山</li>
			</ul>
		</div>
	</div>
</template>
<script>
import NewsHeader from '../../components/shopheader'
export default{
	name:'homeCurrent',
	components:{
		NewsHeader,
	},
	data(){
		return{
			isSpanW:true,
			isSpanZ:true,
			isSpanS:true,
			isSpanP:true,
			isShow1:true,
			isShow2:false,
			dataArr:{
				isInput:false,
				iconArr:[
					{
						iconLeft:"icon-zuojiantou",
						iconRight:"icon-location"
					}
				],
				placeholder:"找室友",
				aimUrl:'/searchpage',
				rightUrl:"/localize"
			},
			findRootmate:[
				{
					imgUrl:require('../../assets/images/shouye/img_fangzi01@2x.png'),
					community:'融泽嘉园2期',
					introduce:'3室1厅1卫',
					area:'90',
					type:'整租',
					price:'6900',
				},
				{
					imgUrl:require('../../assets/images/shouye/img_fangzi01@2x.png'),
					community:'融泽嘉园3期',
					introduce:'2室1厅1卫',
					area:'90',
					type:'合租',
					price:'6800',
				},
				{
					imgUrl:require('../../assets/images/shouye/img_fangzi01@2x.png'),
					community:'融泽嘉园1期',
					introduce:'1室1厅1卫',
					area:'44',
					type:'整租',
					price:'5000',
				},
				{
					imgUrl:require('../../assets/images/shouye/img_fangzi01@2x.png'),
					community:'融泽嘉园1期',
					introduce:'1室1厅1卫',
					area:'44',
					type:'整租',
					price:'5000',
				},
				{
					imgUrl:require('../../assets/images/shouye/img_fangzi01@2x.png'),
					community:'融泽嘉园1期',
					introduce:'1室1厅1卫',
					area:'44',
					type:'整租',
					price:'5000',
				},{
					imgUrl:require('../../assets/images/shouye/img_fangzi01@2x.png'),
					community:'融泽嘉园1期',
					introduce:'1室1厅1卫',
					area:'44',
					type:'整租',
					price:'5000',
				}
			]
		}
	},
	methods:{
		showDiv(){
			this.isShow1 = !this.isShow1;
			this.isShow2 = !this.isShow2;
			this.isSpanW = !this.isSpanW;
		}
	}
}
</script>
<style scoped lang="less">
.homeCurrent{
	width: 100%;
	// min-height: 1328 / 100rem;
	padding-top: 88 / 100rem;
	background-color: #ededed;
	box-sizing: border-box;
	.headerSelect{
		width: 100%;
		height: 80 / 100rem;
		line-height: 80 / 100rem;
		.selectList{
			width: 100%;
			height: 100%;
			background-color: #fff;
			ul{
				width: 100%;
				height: 80 / 100rem;
				padding: 26 / 100rem 62 / 100rem;
				box-sizing: border-box;
				position: relative;
				li{
					position: absolute;
					top:0;
					left:62 / 100rem;
					display: inline;
					text-align: center;
					font-size: 30 / 100rem;
					color: #ff5555;
					font-weight: 600;
					span.one::after{
						border: 12 / 100rem solid transparent;
						border-top: 12 / 100rem solid #ff5555;
						width: 0;
						height: 0;
						position: absolute;
						top:34 / 100rem;
						left:74 / 100rem;
						content: ' ';	
					}
					span.two::after{
						border: 12 / 100rem solid transparent;
						border-bottom: 12 / 100rem solid #ff5555;
						width: 0;
						height: 0;
						position: absolute;
						top:18 / 100rem;
						left:74 / 100rem;
						content: ' ';	
					}
					span{
						font-size: 30 / 100rem;
						color: #ff5555;
						font-weight: 600;
					}
				}
				li:nth-child(2){
					left: 237 / 100rem;
				}
				li:nth-child(3){
					left:425 / 100rem;
				}
				li:nth-child(4){
					left:593 / 100rem;
				}
			}
		}
	}	
	.currentCont{
			width: 100%;
			padding: 0 20 / 100rem;
			padding-top: 20 / 100rem;
			box-sizing: border-box;
			.currentContDetail{
				width: 710 / 100rem;
				height:188 / 100rem;
				background-color: #fff;
				border-radius: 10 / 100rem;
				margin-bottom: 20 / 100rem;
				position: relative;
				.curren_left{
					position: absolute;
					top:10 / 100rem;
					left:20 / 100rem;
					bottom: 10 / 100rem;
					img{
						width: 234 / 100rem; 
						height: 168 / 100rem;
					}
				}
				.current_right{
					position: absolute;
					right: 0;
					top: 0;
					left:284 / 100rem;
					p:nth-child(1){
						position: absolute;
						top:35 / 100rem;
						span{
							color: rgba(0, 0, 0, 0.8);
							font-size: 26 / 100rem;
						}
					}
					p:nth-child(2){
						position: absolute;
						top:78 / 100rem;
						span{
							color: rgba(0, 0, 0, 0.8);
							font-size: 20 / 100rem;
						}
					}
					p:nth-child(3){
						position: absolute;
						top:124 / 100rem;
						span:nth-child(1){
							display: inline-block;
							width: 93 / 100rem;
							height: 42 / 100rem;
							text-align: center;
							line-height: 42 / 100rem;
							border: 1px solid #618698;
							border-radius: 6 / 100rem; 
							color: rgba(97, 134, 152, 0.9);
							font-size: 26 / 100rem;
						}
						
					}
					p:nth-child(4){
						position: absolute;
						top:132 / 100rem;
						right:20 / 100rem;
						span{
							display: inline-block;
							font-size: 26 / 100rem;
							color: #ff5555;
							// position: absolute;
						}
					}
				}
			}
	}
	.weiZhi{
			width: 100%;
			height: 1166 / 100rem;
			background-color: #ededed;
			ul{
				float: left;
				width: 50%;
				text-align: center;
				li{
					margin: 70 / 100rem 90 / 100rem;
					font-size: 30 / 100rem;
				}
				.showDivActive{
					color: #ff5555;
				}
			}
			ul:nth-child(2){
				background-color: #f9f9f9;
			}
	}
}
</style>